import ElementPlus from 'element-plus'
import ArcoVue from '@arco-design/web-vue'
import { setupStore } from './stores'
import { setupRouter } from './routers'
import { setupDirectives } from './directives'

// Tailwind 紧凑型样式重置
import 'virtual:uno.css'
import '@unocss/reset/tailwind-compat.css'

// ElementPlus
import 'element-plus/dist/index.css'
import 'element-plus/theme-chalk/dark/css-vars.css'
import '@/assets/iconfont/iconfont.css'
import 'animate.css'

// 引入字体样式

import '@/styles/index.scss'

import App from './App.vue'
import Loading from '@/components/common/Loading.vue'
import '@arco-design/web-vue/dist/arco.css'

const isDark = usePreferredDark()
const favicon = computed(() => isDark.value ? 'logo.png' : 'logo.svg')

useFavicon(favicon)

async function setupApp() {
  // 初始化 App
  const app = createApp(App)

  app.use(ArcoVue)
  // 初始化 Store
  setupStore(app)

  // 初始化 Directives
  setupDirectives(app)

  // 全局导入 ElementPlus
  const { VITE_EP_IMPORT_MODE } = import.meta.env
  VITE_EP_IMPORT_MODE === 'global' && app.use(ElementPlus)

  // 加载动画
  const appLoading = createApp(Loading)
  appLoading.mount('#appLoading')

  // 初始化 Router
  await setupRouter(app)
  // 卸载加载动画
  appLoading.unmount()
  app.mount('#app')
}
setupApp()
